<script setup lang="ts">
import { ref } from 'vue'
// 动态绑定active  这里比较特殊   @click="flag = 0" :class="{ active: flag === 0 }"
// 定义改变参数  -->v-bind动态绑定active属性  注意：用{}对象  通过flag === 0条件判断  为true则拥有active样式类
const flag = ref(0)
</script>

<template>
  <div class="app">
    <div class="box" @click="flag = 0" :class="{ active: flag === 0 }">111</div>
    <div class="box" @click="flag = 1" :class="{ active: flag === 1 }">222</div>
  </div>
</template>

<style lang="css" scoped>
.box {
  width: 200px;
  height: 100px;
  background-color: pink;
}
.active {
  width: 200px;
  height: 100px;
  color: red;
  background-color: green;
}
</style>
